<template>
  <div class="failed">
    <van-nav-bar title="购买失败">
    <template #left>
      <van-icon name="cross" color="#aaa" size="20" @click-left="onClickLeft" />
    </template>
  </van-nav-bar>
  <img src="../../../public/images/x.svg" class="image_215X1">
  <p class="text_927X1">购买失败</p>
  <p class="text_928X1">非常抱歉，请再次尝试</p>
  <van-button type="default" color="rgba(136, 175, 213, 1)" size="14" @click="buyAgain">重新购买</van-button>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
const router = useRouter()
// 返回上一级
const onClickLeft = () => router.back()
// 跳转到商品详情页
const buyAgain = () => router.push('/coffeewallet')



</script>

<style lang="scss" scoped>
.failed{
    background-color: rgba(255, 255, 255, 1);
    height: 100vh;

  .van-nav-bar {
    width: 375px;
    height: 44px;
    top: 20px;
    color: rgba(56, 56, 56, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid rgba(242, 242, 242, 1);
  }
  .image_215X1{
	width: 86px;
	height: 86px;
	margin-left: 145px;
	margin-top: 80px;
}

.text_927X1{
	width: 112px;
	height: 42px;
	margin-left: 132px;
	margin-top: 20px;
	color: rgba(80, 80, 80, 1);
	font-size: 28px;
	line-height: 150%;
	text-align: left;
}

.text_928X1{
	width: 160px;
	height: 24px;
	margin-left: 108px;
	margin-top: 25px;
	color: rgba(80, 80, 80, 1);
	font-size: 16px;
	line-height: 150%;
	text-align: left;
}

.van-button {
  width: 155px;
	height: 50px;
  margin-left: 110px;
	margin-top: 40px;

}
}
</style>